<div class="phoneConnect">
  <div class="title">
    <div>{{ title }}</div>
  </div>
  <div class="phone">
    <form dForm ngForm [dValidateRules]="formRules.rule" [layout]="layoutDirection" (dSubmit)="submitForm($event)">
      <d-form-item class="phonePrefix">
        <d-form-label [required]="true">手机号</d-form-label>
        <d-form-control [suffixTemplate]="suffixTemplate1">
          <input class="phoneNum" dTextInput autocomplete="off" name="telephoneNumber" placeholder="请输入手机号"
            [(ngModel)]="formData.telephoneNumber" [dValidateRules]="formRules.phoneNumRules"
            [ngModelOptions]="{ updateOn: 'change' }" #phoneNumValid="ngModel" />
        </d-form-control>
        <ng-template #suffixTemplate1>
          <d-select class="prefix" [overview]="'underlined'" [placeholder]="'+86'" [options]="options"></d-select>
        </ng-template>
      </d-form-item>
      <d-form-item class="phoneCode">
        <d-form-label [required]="true">手机验证码</d-form-label>
        <d-form-control>
          <input class="code" dTextInput autocomplete="off" name="verificationCode" placeholder="请输入接收的手机验证码"
            [(ngModel)]="formData.verificationCode" [dValidateRules]="formRules.codeRules"
            [ngModelOptions]="{ updateOn: 'blur' }" maxlength="6" />
          <d-button class="getCode" circled="true"
            [disabled]="!formData.telephoneNumber || !phoneNumValid.valid || countDown" (btnClick)="getCode()"><span
              *ngIf=!countDown>发送验证码</span>
            <app-countdown *ngIf=countDown [enddate]="starttime" type="getCode" (callGetList)="callGetList()">
            </app-countdown>
          </d-button>
        </d-form-control>
      </d-form-item>
      <d-form-operation>
        <button class="submit" dFormSubmit>绑定</button>
      </d-form-operation>
    </form>
  </div>
</div>
